<template>
  <div class="app-container" ref="appcontainer">
    <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="手机号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="手机号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="姓名"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
    <el-table v-loading="loading" :height="tableHeight" :data="orderList">
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="订单号" align="center" prop="orderId" />
      <el-table-column label="上门时间" align="center" prop="appointmentTime" >
        <template slot-scope="scope">
          <p>{{ scope.row.storeDoorserverProduct.appointmentTime }} {{ scope.row.storeDoorserverProduct.timeFrame }}</p>
        </template>
      </el-table-column>
      <el-table-column label="项目名" align="center" prop="productName" />
      <el-table-column label="订单金额" align="center" prop="totalPrice" />
      <el-table-column label="付款金额" align="center" prop="payPrice" />
      <!-- <el-table-column label="核销码" align="center" prop="verifyCode" /> -->
      <el-table-column label="项目等级" align="center" prop="productName" >
        <template slot-scope="scope">
          <p>{{ scope.row.storeDoorserverProduct.grade }}</p>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center" prop="payTime" />
      <el-table-column label="状态" align="center" prop="type">
        <template slot-scope="scope">
          {{
            scope.row.orderState == "wait_pay"
              ? "待付款"
              : scope.row.orderState == "wait_use"
              ? "待使用"
              : "已使用"
          }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" prop="type">
        <template slot-scope="scope">
          {{
            scope.row.orderState == "used"
              ? "已完成"
              : !scope.row.doorUserStoreId
              ? "待指派"
              : "已指派"
          }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="!(scope.row.orderState == 'used')" @click="toAssign(scope.row)"
            >指派</el-button
          >
          <el-button type="text" size="small" @click="toDetail(scope.row.id)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="指派"
      :visible.sync="zpDialogVisible"
      width="500px"
      @close="handleZpClose"
      >
      <el-form label-position="right" label-width="80px">
        <el-form-item label="选择门店">
          <el-select v-model="storeid" placeholder="请选择" @change="handleStoreChange" >
            <el-option
              v-for="item in options"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择员工">
          <el-select v-model="storeUserId" placeholder="请选择" @change="handleStuffChange" >
            <el-option
              v-for="item in stuffOptions"
              :key="item.id"
              :label="item.userName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleZpClose">取 消</el-button>
        <el-button type="primary" @click="assign">指 派</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
import { appointmentOrder,getStoreList,getStuffList,assignStuff } from "@/api/store/store";
export default {
  name: "Appointment",
  data() {
    return {
      tableHeight: 0,
      // 遮罩层
      loading: true,
      orderList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderStatue: ""
      },
      total: 0,
      showSearch: false,
      zpDialogVisible: false,
      orderId: '',
      storeid: '',
      options: [],
      storeUserId: '',
      stuffOptions: []
    };
  },
  created() {
    this.getList();
    this.calHeight();
    this.getStore()
  },
  watch: {
    showSearch: "calHeight",
  },
  methods: {
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.appcontainer.getBoundingClientRect();
        // let height = this.$refs.queryForm.$el.offsetHeight;
        this.tableHeight = rect.height - 120;
      });
    },
    getList() {
      this.loading = true;
      appointmentOrder(this.queryParams).then((res) => {
        this.total = res.data.total;
        this.orderList = res.data.rows;
        console.log(this.orderList);
        this.loading = false;
      });
    },
    apply(row) {
      this.$confirm('是否确认打款?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          const id = row.id;
          applycash(id).then((res) => {
            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    toDetail(id) {
      this.$router.push({
        path: '/deal/appointdetail?id='+id
      })
    },
    toAssign(row) {
      this.orderId = row.id
      this.zpDialogVisible = true
      if(row.doorStoreId) {
        this.storeid = String(row.doorStoreId)
        this.getStuff()
      }
      if(row.doorUserStoreId) {
        this.storeUserId = row.doorUserStoreId
      }
    },
    getStore() {
      getStoreList().then(res => {
        this.options = res
      })
    },
    handleStoreChange(val) {
      console.log(val)
      this.storeid = val
      this.getStuff()
    },
    getStuff() {
      getStuffList(this.storeid).then(res => {
        this.stuffOptions = res.data.data
      })
    },
    handleStuffChange(val) {
      this.storeUserId = val
    },
    assign() {
    if(this.storeid == ''){
      this.$message({
        message: '请选择门店',
        type: 'warning'
      })
      return
    }
    if(this.storeUserId == ''){
      this.$message({
        message: '请选择员工',
        type: 'warning'
      })
      return
    }
      const data = {
        orderId: this.orderId,
        storeUserId: this.storeUserId
      }
      assignStuff(data).then(res => {
        if(res.code == 200) {
          this.zpDialogVisible = false
          this.$message({
            message: '指派成功',
            type: 'success'
          });
        }
      })
    },
    handleZpClose() {
      this.zpDialogVisible = false
      this.storeid = ''
      this.storeUserId = ''
    }
  },
};
</script>
  